

<template>
  <div id="myChart" :style="{width: '800px', height: '500px',background:'#f1f1f1'}"></div>

</template>


<script>
  import Vue from "vue"
  import echarts from 'echarts'
  import {listTemperature,researchByUserId} from "@/api/system/temperature"
  Vue.prototype.$echarts = echarts
  let myChart
  // function randomData() {
  //   now = new Date(+now + oneDay);
  //   value = value + Math.random() * 21 - 10;
  //   return {
  //     name: now.toString(),
  //     value: [
  //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
  //       Math.round(value)
  //     ]
  //   };
  // }

  function addData(shift) {

    if (shift) {
      date.shift();
      data.shift();
    }
  }

  for (var i = 1; i < 100; i++) {
    addData();
  }

  let data = [];
  let date = [];
  let base = +new Date(1997, 9, 3);
  let oneDay = 24 * 3600 * 1000;
  var now = new Date(base);
  // let value = Math.random() * 1000;

  export default {
    name: 'hello',
    data () {
      return {
        temperatureList:null,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          temperature: null,
          deviceId: null,
          userId: null,
          createTime:null,
        },
        // 表单参数
        form: {},
      }
    },
    created() {
      this.getList();
    },
    mounted(){
      this.drawLine();
    },
    methods: {

      getList() {
        this.loading = true;
        console.log(this.$route.query.userId)
        listTemperature(this.queryParams).then(response => {
          this.temperatureList = response.rows;
          this.total = response.total;
          this.loading = false;
          // console.log("1"+this.temperatureList);

          for (let i=0;i<this.temperatureList.length;i++){
            if (this.$route.query.userId == this.temperatureList[i].userId){
              console.log(this.temperatureList[i].createTime);
              date.push(this.temperatureList[i].createTime)
              data.push(this.temperatureList[i].temperature);
            }

          }

        });
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        myChart= this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '温度变化图'
          },
          grid:{
            x:25,
            y:45,
            x2:5,
            y2:20,
            borderWidth:1
          },
          // tooltip: {
          //   trigger: 'axis',
          //   formatter: function (params) {
          //     params = params[0];
          //     var date = new Date(params.name);
          //     return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
          //   },
          //   axisPointer: {
          //     animation: false
          //   }
          // },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // type: 'time',
            // splitLine: {
            //   show: false
            // },
            data:date,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            },
          },
          series: [{
            name: '温度',
            type: 'line',
            smooth:true,
            // symbol: 'none',
            stack: 'a',
            //填充
            // areaStyle: {
            //   normal: {}
            // },

            // showSymbol: false,
            // hoverAnimation: false,
            data: data
          }]
        });
      }
    }
  }



  setInterval(function () {

    // console.log("123"+this.temperatureList);
    addData(true);
    myChart.setOption({
      xAxis: {
        data: date
      },
      series: [{
        name:'温度',
        data: data
      }]
    });
  }, 1500);
</script>

<!--<style>-->

<!--  #container {-->
<!--    width: 800px;-->
<!--    height: 500px;-->
<!--    background:#f1f1f1;-->
<!--  }-->
<!--</style>-->

